<template>
  <a-modal
      centered
      :width="300"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :closable="false"
      :keyboard="false"
      :footer="null"
      :bodyStyle="{ padding: '30px' }"
      @ok="handleOk"
      @cancel="handleCancel">
    <template>
      <h3 style="text-align: center; margin-bottom: 20px; ">登录</h3>
      <a-form-model ref="model" :model="model" :rules="validatorRules">
        <a-form-model-item required prop="username">
          <a-input v-model="model.username" size="large" placeholder="请输入帐户名">
            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-model-item>

        <a-form-model-item required prop="password">
          <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-model-item>

        <a-row :gutter="0">
          <a-col :span="16">
            <a-form-model-item required prop="inputCode">
              <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
                <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" style="text-align: right">
            <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" />
            <img v-else style="margin-top: 2px;" src="~@/assets/checkcode.png" @click="handleChangeCheckCode" />
          </a-col>
        </a-row>

        <a-form-item style="margin-bottom: 0px">
          <a-button size="large" type="primary" htmlType="submit" :loading="confirmLoading"
                    @click.stop.prevent="handleSubmit" :disabled="confirmLoading"
                    style="width: 100%; ">确定
          </a-button>
        </a-form-item>
      </a-form-model>
    </template>
  </a-modal>
</template>

<script>
import { mapActions } from 'vuex'
import { getAction } from '@/api/manage'
import { timeFix } from '@/utils/util'

export default {
  name: "mobile-login",
  data () {
    return {
      ModalText: 'Content of the modal',
      visible: true,
      confirmLoading: false,
      requestCodeSuccess: false,
      randCodeImage: '',
      currdatetime: '',
      model: {
        username: '',
        password: '',
        inputCode: '',
      }
    }
  },
  computed: {
    validatorRules () {
      return {
        username: [
          { required: true, message: '请输入用户名!', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码!', trigger: 'blur' }
        ],
        inputCode: [
          { required: true, message: '请输入验证码!', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.handleChangeCheckCode();
  },
  methods: {
    ...mapActions(['Login']),
    handleSubmit () {
      const that = this;
      // 触发表单验证
      this.$refs['model'].validate(valid => {
        if (valid) {
          that.confirmLoading = true;
          let loginParams = {
            username: this.model.username,
            password: this.model.password,
            captcha: this.model.inputCode,
            checkKey: this.currdatetime,
          }
          console.log("登录参数", loginParams)
          this.Login(loginParams).then((res) => {
            window.location.href = '/360renliceping/mobile/own-list'
            // this.$router.push({ path: "/mobile/questionnaire-list" })
            this.$notification.success({
              message: '欢迎',
              description: `${ timeFix() }，欢迎回来`,
            });
          }).catch((err) => {
            let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
            this.$notification['error']({
              message: '登录失败',
              description: description,
            });
            that.confirmLoading = false;
            that.handleCancel();
          })
        }
      })
    },
    /**刷新验证码*/
    handleChangeCheckCode () {
      this.currdatetime = new Date().getTime();
      this.model.inputCode = ''
      getAction(`/sys/randomImage/${ this.currdatetime }`).then(res => {
        if (res.success) {
          this.randCodeImage = res.result
          this.requestCodeSuccess = true
        } else {
          this.$message.error(res.message)
          this.requestCodeSuccess = false
        }
      }).catch(() => {
        this.requestCodeSuccess = false
      })
    },
    handleOk (e) {
      // this.ModalText = 'The modal will be closed after two seconds';
      // this.confirmLoading = true;
      // setTimeout(() => {
      //   this.visible = false;
      //   this.confirmLoading = false;
      // }, 2000);
    },
    handleCancel (e) {
      // console.log('Clicked cancel button');
      // this.visible = false;
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  .ant-input {
    border-radius: 50px;
  }

  .ant-btn {
    border-radius: 50px;
  }
}
</style>
